import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// 表单模块的引入;
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
// 路由引入
import { AppRouteModel } from './app.route';

// 组件引入
import { AppComponent } from './app.component';
import { HomeComponent } from './Home/index.component';
import { FormComponent } from './Form/index.component';
import { SideBarComponent } from './SiderBar/index.component';
import { NgForComponent } from './ng-for/index.component';
import { InputOutputComponent } from './parent-child/index.component';
import { Child1Component } from './child-emit/index.component';
import { TemplateFormComponent } from './template-form/template-form.component';
import { ReactiveFromComponent } from './reactive-from/reactive-from.component';
import { ValidatorDirectiveComponent } from './validator-directive/validator-directive.component';
import { CounterComponent } from './custom-formcontrol/count.component';
import { BloggerComponent } from './async-data/blogger.component';
import { PostsComponent } from './async-data/post.component';

// 导入自定义的指令;
import { EqualValidatorDirective } from './validator-directive/equal-validator';
import { CustomFormcontrolComponent } from './custom-formcontrol/custom-formcontrol.component';
import { AsyncDataComponent } from './async-data/async-data.component';


// 导入子模块;
import { ChangeDetectionModule } from './change-detection/change-detection.module';
import { TestPagesComponent } from './test-pages/test-pages.component';

@NgModule({
  declarations: [
    // Angular中，组件使用必须在ngModel的declarations中定义;
    AppComponent,
    HomeComponent,
    FormComponent,
    SideBarComponent,
    NgForComponent,
    InputOutputComponent,
    Child1Component,
    TemplateFormComponent,
    ReactiveFromComponent,
    ValidatorDirectiveComponent,
    CustomFormcontrolComponent,
    CounterComponent,
    BloggerComponent,
    PostsComponent,
    // 指令也必须再ngModel中定义;
    EqualValidatorDirective,
    AsyncDataComponent,
    TestPagesComponent,
  ],
  // angular内置模块 -- imports数组中应该只有NgModule类。不要放置其它类型的类。
  imports: [
    // 浏览器模块
    BrowserModule,
    // 路由模块 -- 和引入的模块名称对应;
    AppRouteModel,
    // 自定义的子模块
    ChangeDetectionModule,
    // 表单模块
    // 友情提示：若使用 template-driven 表单，则导入 FormsModule；若使用 reactive forms，则导入 ReactiveFormsModule
    // tips: 引入表单模块后，在组件中就可以使用 ngForm, ngModel等指令了;
    FormsModule,
    ReactiveFormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
